<template>
  <div class="sliderBar">
    <el-col :span="24">
      <el-menu :default-active="$route.path.slice(1)" class="el-menu-vertical-demo" router>
        <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
          <span slot="title">{{ item.meta.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
import router from '@/router'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.list = router.options.routes[0].children
  }
}
</script>

<style lang="less">
.sliderBar {
  width: 260px;
  height: 392px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  div {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }
  .el-menu {
    border: 0;
  }
  .el-menu-item.is-active {
    color: white;
    background-color: #409eff;
  }
}
</style>
